<template>
    <div class="phoneLogin_wrapper">
      <div class="phoneLogin_contain">
        <div class="phoneLogin_item_left">
          <el-image
            src="https://cos.shichenghudong.com/2024/11/14/67355b2990636.png"
            fit="fill"
          />
        </div>
        <div class="phoneLogin_item_right">
          <div class="text">
            <p>您好</p>
            <p>欢迎使用管理系统</p>
          </div>
          <div class="input_title">账号密码登录</div>
          <div class="input_item">
            <div class="input_item_img">
              <img
                style="height: 20px"
                src="https://cos.shichenghudong.com/2024/11/14/67358adc0fd36.png"
                alt=""
              />
            </div>
  
            <div class="inputs" style="padding-left: 10px">
              <input
                type="text"
                maxlength="11"
                placeholder="请输入手机号"
                v-model="userInputs.phone"
                placeholder-class="placeholderclass"
              />
            </div>
          </div>
          <div class="input_item">
            <div class="input_item_img">
              <img
                style="height: 20px"
                 src="https://cos.shichenghudong.com/2024/11/14/67358acf06c6d.png"
                alt=""
              />
            </div>
            <div class="inputs" style="padding-left: 10px">
                <input type="password"
              style="height: 40px;padding-left: 10px"
              placeholder="请输入密码"
              v-model="password"
              show-password
            >
            </div>
          </div>
          <div class="input_item1">
            <input placeholder="请输入验证码" v-model="inputCode" maxlength="4" />
            <span @click="createCode" id="spancode">
              <Sldentify :identifyCode="code"></Sldentify>
            </span>
          </div>
          <div class="change_login_method"></div>
          <div class="input_login_btn">
            <el-button
              type="primary"
              style="width: 100%"
              :disabled="
                !userInputs.phone || !password || !inputCode
              "
              @click="loginConfirm"
              >登录</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { login } from "@/api/contract";
  import Sldentify from "@/components/configurationitem/Sldentfy.vue";
  
  export default {
    components: {
      Sldentify,
    },
    data() {
      return {
        userInputs: {
          phone: "",
        },
        password: "",
        inputCode: "",
        code: "", // 生成的验证码
      };
    },
    mounted() {
      this.createCode(); // 页面加载时生成验证码
    },
    methods: {
      // 生成验证码
      createCode() {
        let text = "";
        let possible = "23456789abcdefghjmnpqrstuvwxyABCDEFGHJKLMNPQRSTUVWXYZ";
        for (let i = 0; i < 4; i++) {
          text += possible.charAt(Math.floor(Math.random() * possible.length));
        }
        this.code = text;
      },
      // 登录按钮点击事件
      loginConfirm() {
        this.loginPwd();
      },
      // 执行密码登录
      loginPwd() {
        // 验证码校验
        if (this.inputCode.toLowerCase() !== this.code.toLowerCase()) {
          this.$message({
            showClose: true,
            message: "验证码错误",
            type: "error",
          });
          this.inputCode = "";
          this.createCode(); // 刷新验证码
          return;
        }
  
        let data = {
          phone: this.userInputs.phone,
          password: this.password,
        };
  
        login(data).then((res) => {
          // console.log("登录接口响应", res);
          if (res.data.code === 200) { // 根据后端响应结构检查code
            this.$message({
              showClose: true,
              message: "登录成功",
              type: "success",
            });
  
            // 存储 token 和用户信息到 localStorage
            localStorage.setItem("token", res.data.token);
            localStorage.setItem("user", res.data.data.name); // 根据后端响应结构获取用户名
            localStorage.setItem("isLoggedIn", true);
  
            // 跳转到首页
            this.$router.push({
              path: "/",
            });
          } else {
            this.$message({
              showClose: true,
              message: res.data.message || '登录失败', // 显示后端返回的错误信息
              type: "error",
            });
            this.inputCode = ""; // 清空验证码
            this.createCode(); // 刷新验证码
          }
        }).catch(error => {
             console.error("登录请求失败", error);
             this.$message({
              showClose: true,
              message: '登录请求失败，请稍后重试', // 处理请求本身的错误
              type: "error",
            });
            this.inputCode = ""; // 清空验证码
            this.createCode(); // 刷新验证码
        });
      },
    },
  };
  </script>
  
  <style lang="less">
  .el-input-group__append,
  .el-input-group__prepend {
    background-color: #f5f7fa; // 轻微灰色背景
    border: 1px solid #dcdfe6;
    border-right: none;
    padding: 0 20px;
    height: 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  
  .el-input-group--prepend .el-input__inner {
    height: 40px;
    border: 1px solid #dcdfe6;
    border-left: none;
    background-color: #f5f7fa; // 轻微灰色背景
  }
  
  .el-input__inner {
    height: 40px;
    line-height: 40px;
    background-color: #f5f7fa; // 轻微灰色背景
    border: 1px solid #dcdfe6;
  }
  
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
  /* 调整 Element UI 密码输入框图标位置 */
  .el-input--suffix .el-input__inner {
    padding-right: 30px; /* 留出位置给图标 */
  }
  .el-input--suffix .el-input__suffix {
      right: 10px; /* 调整图标距离右侧的距离 */
      top: 0; /* 调整图标垂直位置 */
      height: 100%;
      display: flex;
      align-items: center;
  }
  </style>
  <style lang="less" scoped>
  ::-webkit-input-placeholder {
    color: #909399; // 调整placeholder颜色
  }
  
  .phoneLogin_wrapper {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
  
    .phoneLogin_contain {
      display: flex;
      align-items: center;
      width: 80%;
      max-width: 1000px;
      height: 80%;
      max-height: 600px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      background-color: #fff;
  
      .phoneLogin_item_left {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
  
        .el-image {
          width: 100%;
          height: 100%;
          .el-image__inner {
            object-fit: cover;
          }
        }
      }
  
      .phoneLogin_item_right {
        flex: 1;
        padding: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
  
        .text {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 24px;
          color: #333333;
          margin-bottom: 30px;
          text-align: center;
  
          p {
            margin: 5px 0;
          }
        }
        .input_title {
          font-weight: 400;
          font-size: 18px;
          color: #2680eb; // 账号密码登录颜色
          margin-bottom: 20px; // 与上方文字间距
          text-align: left;
        }
  
        /* 统一输入项样式 */
        .input_item1, .input_item2, .input_item {
            margin-top: 15px; // 与上方元素的间距
        }
  
        .input_item1 { // 验证码输入项
          display: flex;
          align-items: center;
          justify-content: space-between;
  
          input {
            width: calc(70% - 10px); // 调整宽度，留出验证码的间距
            border: 1px solid #dcdfe6;
            height: 40px;
            border-radius: 4px;
            padding: 0 10px;
            box-sizing: border-box;
            outline: none;
            background-color: #f5f7fa; // 轻微灰色背景
            &:focus {
              outline: none;
              border-color: #409EFF;
            }
          }
  
          #spancode { // 验证码图片区域
            display: inline-block;
            width: 30%;
            height: 40px;
            cursor: pointer;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f5f7fa; // 轻微灰色背景
            margin-left: 10px; // 与输入框的间距
          }
        }
  
        .input_item2 { // 密码输入项
          .el-input {
            height: 40px;
            display: flex;
            align-items: center;
  
            .el-input__inner {
              height: 40px;
              line-height: 40px;
              border: 1px solid #dcdfe6;
              border-left: none;
              background-color: #f5f7fa; // 轻微灰色背景
              padding-left: 10px; /* 调整输入框左侧内边距 */
            }
  
            ::v-deep .el-input-group__prepend {
              padding: 0 20px;
              border: 1px solid #dcdfe6;
              border-right: none;
              box-sizing: border-box;
              height: 40px;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #f5f7fa; // 轻微灰色背景
              margin: 0;
              img {
                height: 20px;
                width: auto;
                display: block;
              }
            }
          }
        }
        .input_item { // 手机号输入项
          display: flex;
          align-items: center;
          width: 100%;
          border-radius: 4px;
          border: 1px solid #dcdfe6;
          height: 40px;
          background-color: #f5f7fa; // 轻微灰色背景
  
  
          .input_item_img {
            padding: 0 20px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 1px solid #dcdfe6;
            background-color: #f5f7fa; // 轻微灰色背景
            img {
              height: 20px;
              width: auto;
              display: block;
            }
          }
  
          .inputs {
            flex: 1;
            input {
              width: 100%;
              border: none;
              outline: none;
              padding: 0 10px;
              height: 38px;
              box-sizing: border-box;
              background-color: #f5f7fa; // 轻微灰色背景
            }
          }
  
          .code_btn { /* 这个按钮在当前设计中未使用，但保留 */
            display: flex;
            align-items: center;
            background-color: #2b7de1;
            font-size: 14px;
            color: #fff;
            font-weight: normal;
            padding: 8px 15px;
            border-radius: 4px;
            margin-left: 10px;
          }
  
          .code_btn:disabled {
            background-color: #ccc;
          }
        }
  
        .change_login_method { /* 这个元素在当前设计中未使用，但保留 */
          display: flex;
          justify-content: flex-end;
          cursor: pointer;
          margin-top: 10px; // 与上方元素的间距
          font-size: 14px;
  
          span {
            color: #333;
  
            &.span_active {
              color: #2b7de1;
            }
          }
        }
  
        .input_login_btn { // 登录按钮
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          margin-top: 30px; // 与上方元素的间距
  
          .el-button {
            height: 40px;
            font-size: 16px;
            background: linear-gradient(to right, #409EFF, #79BBFF); /* 渐变背景 */
            border: none; /* 移除边框 */
          }
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    .phoneLogin_contain {
      flex-direction: column;
      height: auto;
      max-height: none;
      width: 95%;
      margin: 20px auto; /* 移动端居中 */
  
      .phoneLogin_item_left {
        width: 100%;
        height: 200px;
      }
  
      .phoneLogin_item_right {
        width: 100%;
        padding: 20px;
      }
    }
  }
  </style>
<style>
</style>